import dayjs from 'dayjs';
import {
  formatOptions,
  formatSeriesLabelToNumber,
  formatSeriesLabelToPercent,
  legendStyle,
  xLabelStyle,
  yLabelStyle
} from './formatter';
import type { Options, XType, YType, BaseNameDataObject } from './type';
import { formatDecimal } from './util';

interface YData extends BaseNameDataObject {
  barWidth?: number;
  tooltipTitles?: string[];
}

interface BarChartProps {
  grid?: any;
  legend?: any;
  tooltip?: Function;
  options: Options;
  xType: XType;
  yType: YType;
  xData: number[] | string[];
  yData: YData[];
}

const DEBUG = false;

export const createBarOption = ({
  grid,
  legend,
  tooltip,
  options,
  xType,
  yType,
  xData,
  yData
}: BarChartProps) => {
  // 格式化options
  options = formatOptions(options);

  // 设定距离
  // const { maxValue, minValue } = getMaxAndMin(yData);
  // if (yType === "number") {
  //   options.distance = getDistance(maxValue, minValue);
  // } else {
  //   options.distance = 36;
  // }

  // 图表边界
  // 暂时封存
  // const defaultGrid = {
  //   left: 10 - options.distance, // 组件离容器左侧的距离
  //   right: yType === "percent" ? 0 : 20, // 组件离容器右侧的距离
  //   top: 10, // 组件离容器上侧的距离(无图例10，图例在上时38，显示y轴名称时38，显示柱体值时22)
  //   bottom: 0, // 组件离容器下侧的距离(无图例0，图例暂不支持在下，不显示x轴标签时10)
  //   containLabel: true, // grid区域是否包含坐标轴的刻度标签
  // };
  const defaultGrid = {
    left: 40, // 组件离容器左侧的距离
    right: 10, // 组件离容器右侧的距离
    top: 10, // 组件离容器上侧的距离(无图例10，图例在上时42/0，显示y轴名称时45，显示柱体值时22)
    bottom: 25, // 组件离容器下侧的距离(无图例25，图例暂不支持在下，不显示x轴标签时10)
    containLabel: false // grid区域是否包含坐标轴的刻度标签
  };
  let finalGrid = defaultGrid;
  if (grid) {
    finalGrid = Object.assign(defaultGrid, grid);
  }

  // 图例
  const defaultLegend = {
    show: yData.length > 1 && options.showLegend,
    icon: 'circle', // 图例图标形状
    borderWidth: DEBUG ? 1 : 0,
    borderColor: DEBUG ? 'red' : 'transparent',
    height: 20,
    itemWidth: 8, // 图例图标宽度
    itemHeight: 8, // 图例图标高度
    itemGap: 26, // 图例每项之间的间隔
    padding: [0, 0, 0, 0], // 图例内边距，单位px，默认上下左右内边距为5
    // borderRadius: 1,
    top: 0,
    right: 2,
    textStyle: legendStyle(), // 图例文本
    data: yData.map((item) => item.name) // 图例名称，要与series.name对应
    // selected // 图例选择状态
  };
  let finalLegend = defaultLegend;
  if (legend) {
    finalLegend = Object.assign(defaultLegend, legend);
  }

  /**
   * 针对不同配置调整图表边界与图例位置
   */
  // 暂时默认显示图例、显示柱体值互相独立
  if (yData.length > 1) {
    finalGrid.top = 38;
  } else if (options.showValue) {
    finalGrid.top = 22;
    // 10 + 12(柱体值字号)
  }
  // 显示y轴名称的情况
  if (options.showSeriesName) {
    finalGrid.top = 38;
  }
  // 由于图例固定在上方，因此可以单独决定是否显示x轴标签时的bottom值
  if (!options.showLabel) {
    finalGrid.bottom = 10;
    if (yType === 'number') {
      finalGrid.right = 0;
    }
  }

  /**
   * 图表配置主体
   */
  const ret = {
    grid: finalGrid,
    legend: finalLegend,
    tooltip: {
      trigger: 'axis', // 坐标轴触发，折线图等会使用类目轴的图表中使用
      showDelay: 0, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
      backgroundColor: 'rgba(0, 0, 0, 0.6)', // 背景颜色
      padding: 8,
      borderRadius: 6, // 边框圆角
      borderWidth: 0, // 边框宽度
      formatter: tooltip
        ? tooltip
        : (params: any) => {
          // 副标题
          let subTitle = params[0].axisValue;
          if (xType === 'date') {
            subTitle = dayjs.unix(params[0].axisValue).format('MM/DD');
          } else if (xType === 'time') {
            subTitle = dayjs.unix(params[0].axisValue).format('MM/DD HH:mm');
          }
          let subTitleStr = `<div class="subtitle text-1${xType === 'normal' ? ' no-number' : ''}">${subTitle}</div>`;
          // 由于UI的特殊情况，柱状图特殊处理
          if (yData.length === 1 && !params[0].seriesName) {
            subTitleStr = '';
          }

          // 标题
          let titleStr = '';
          params.forEach((item: any) => {
            const series = yData[item.seriesIndex];
            const titles = series.tooltipTitles;
            if (titles?.length) {
              const title = titles[item.dataIndex];
              titleStr = `<div class="title">${title}</div>`;
            }
          });

          // 图例数据
          let itemStr = '';
          params.forEach((item: any) => {
            let number = item.value;
            let unit = '';
            if (yType === 'percent') {
              // number = (number * 100).toFixed(2);
              number = formatDecimal(
                number,
                  options.percentPrecision as number
              );
              unit = '%';
            } else if (yType === 'number') {
              // if (number > 10000) {
              //   number = parseFloat((number / 10000).toFixed(1));
              //   unit = "万";
              // }
            }

            itemStr += `<div class="row">
                <div class="sample" style="background: ${item.color}"></div>
                <div class="name">${
  yData.length === 1 && !item.seriesName
    ? item.axisValue
    : item.seriesName
}：</div>
                <div class="value">
                  <div class="value-inner">
                    <span class="unit">${unit}</span>
                    <span class="number">${number.toLocaleString()}</span>
                  </div>
                </div>
              </div>`;
          });

          const str = `<div class="chart-tooltip bar">
              ${titleStr}
              ${subTitleStr}
              ${itemStr}
            </div>`;

          return str;
        },
      axisPointer: {
        type: 'shadow',
        z: 0,
        shadowStyle: {
          color: 'rgba(237, 241, 253, 0.5)',
          width: '1'
        }
      } // 坐标轴指示器配置项
    },
    color: yData.map((item) => item.color),
    xAxis: {
      type: 'category',
      triggerEvent: true, // 是否触发事件
      boundaryGap: true, // x坐标轴两边是否留白，不留白时，第一个和最后一个数据点会被遮挡
      axisLine: {
        show: true,
        lineStyle: {
          color: '#E5E6EC',
          type: 'solid'
        }
      }, // 坐标轴线
      axisTick: {
        show: false
      }, // 坐标轴刻度
      axisLabel: xLabelStyle(xType, options), // 坐标轴标签
      data: xData
    },
    yAxis: {
      type: 'value',
      name: options.showSeriesName ? options.seriesName || yData[0]?.name : '',
      nameLocation: 'end',
      nameTextStyle: {
        align: 'left',
        color: '#8F98B2',
        // padding: [0, 0, 3, 0 - options.distance],
        padding: [0, 0, 3, -40],
        fontSize: 12,
        lineHeight: 20,
        fontFamily: 'PingFang SC, sans-serif'
      },
      axisLabel: yLabelStyle(yType, options), // 坐标轴标签
      splitLine: {
        show: true,
        lineStyle: {
          color: '#E5E6EC',
          type: 'dashed'
        }
      } // 分割线
    },
    series: yData.map((item, index) => {
      return {
        type: 'bar',
        data: item.data,
        name: item.name,
        yAxisIndex: 0,
        zlevel: yData.length - index, // 图层顺序
        // barWidth: item.barWidth,
        barMaxWidth: item.barWidth,
        barGap: 0.5,
        itemStyle: {
          color: item.color,
          borderRadius: [2, 2, 0, 0]
        },
        label: {
          show: yData.length > 1 || !options.showValue ? false : true,
          position: 'top',
          color: '#69718C',
          fontSize: 12,
          lineHeight: 18,
          fontWeight: 'normal',
          fontFamily: 'PingFang SC, sans-serif',
          formatter: (params: any) => {
            if (yType === 'number') {
              return formatSeriesLabelToNumber(params.value);
            } else if (yType === 'percent') {
              return formatSeriesLabelToPercent(
                params.value,
                options.percentPrecision as number
              );
            }
          },
          rich: {
            a: {
              fontSize: 13,
              lineHeight: 20,
              fontFamily: 'number, sans-serif'
            }
          }
        }
        // cursor: "normal",
      };
    })
  };

  return ret;
};
